<template>
  <el-container class="reportContainer">
    <el-header>
      <h3>报表列表</h3>
    </el-header>

    <el-main style="height:100%;display: flex;flex-direction: column">
      <el-table  :data="tableData" height="100%">
        <el-table-column prop="reportName" label="报表名称"></el-table-column>
        <el-table-column prop="reportDesc" label="报表描述"></el-table-column>


        <el-table-column label="创建时间">
          <span slot-scope="pros">{{timestampToTime(pros.row.reportCreatetime)}}</span>
        </el-table-column>

        <el-table-column label="操作">
          <template  slot-scope="pros">

            <el-button icon="el-icon-view" circle title="预览" type="info" @click="review(pros.row.reportId)"></el-button>

            <el-button icon="el-icon-delete" circle title="删除" type="danger" @click="deleteReport(pros.row.reportId)"></el-button>

          </template>
          
        </el-table-column>


      </el-table>
      <el-pagination
              small
              layout="prev, pager, next"
              :total="total" :page-size="size" :current-page.sync="page" @current-change="loadData">
      </el-pagination>

    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      total:0,
      tableData: [],
      page: 1,
      size: 10
    };
  },

  mounted() {
    this.loadData();
  },

  methods: {

    deleteReport(reportId){

      this.$confirm('确认删除此报表?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$axios.get("/report/deleteReport?reportId=" + reportId)
                .then(d=>{

                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });

                  this.loadData();
                })
                .catch(e=>{

                  this.$message({
                    type: 'info',
                    message: '删除失败'
                  });

                });



      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    review(reportId){

      this.$router.push({path:'/reportReview',query:{
        reportId:reportId
      }});

    },

    // 时间戳转换成时间
    // 使用element table组件中的formatter属性，传入一个函数
    timestampToTime(timestamp) {
        var date = new Date(timestamp);//如果date为10位不需要乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y+M+D+h+m+s;
    },

    loadData() {
      this.$axios
        .get("/report/getReportList?" + "page=" + this.page + "&size=" + this.size)
        .then(d => {
          this.tableData = d.data.rows;
          this.total = d.data.total;
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "查询列表获取失败"
          });
        });
    }
  }
};
</script>

<style scoped>
.reportContainer {
  width: 100%;
  height: 100%;
}
</style>
